<div>
  <mat-tab-group [(selectedIndex)]="selectedTab">
    <mat-tab *ngFor="let contact of data.service.contacts;let i = index;" [label]="getTabHeader(contact)">
      <app-input field="name" [change]="contact" [orig]="original && original[i]">
        <mat-form-field class="textInput">
          <mat-placeholder i18n>Name</mat-placeholder>
          <input matInput required name="name" [(ngModel)]="contact.name">
          <mat-hint align="end">
            <app-hint></app-hint>
          </mat-hint>
        </mat-form-field>
        <mat-icon appHelp
                 i18n-matTooltip="contact.name"
                 matTooltip="First and last name of the contact">
        </mat-icon>
      </app-input>
      <app-input field="email" [change]="contact" [orig]="original && original[i]">
        <mat-form-field class="textInput">
          <mat-placeholder i18n>EMail</mat-placeholder>
          <input matInput required [(ngModel)]="contact.email" email>
          <mat-hint align="end">
            <app-hint></app-hint>
          </mat-hint>
        </mat-form-field>
        <mat-icon appHelp
                 i18n-matTooltip="contact.email"
                 matTooltip="EMail of the contact">
        </mat-icon>
      </app-input>
      <app-input field="phone" [change]="contact" [orig]="original && original[i]">
        <mat-form-field class="textInput">
          <mat-placeholder>Phone</mat-placeholder>
          <input matInput [(ngModel)]="contact.phone">
          <mat-hint align="end">
            <app-hint></app-hint>
          </mat-hint>
        </mat-form-field>
        <mat-icon appHelp
                 i18n-matTooltip="contact.phone"
                 matTooltip="Phone number of the contact">
        </mat-icon>
      </app-input>
      <app-input field="department" [change]="contact" [orig]="original && original[i]">
        <mat-form-field class="textInput">
          <mat-placeholder>Department</mat-placeholder>
          <input matInput [(ngModel)]="contact.department">
          <mat-hint align="end">
            <app-hint></app-hint>
          </mat-hint>
        </mat-form-field>
        <mat-icon appHelp
                 i18n-matTooltip="contact.department"
                 matTooltip="Department of the contact">
        </mat-icon>
      </app-input>
    </mat-tab>
  </mat-tab-group>
  <div style="height:25px;padding-top: 5px;">
    <div style="float:right;padidng:5px">
      <button mat-mini-fab (click)="addContact()">
        <mat-icon>add</mat-icon>
      </button>
      <button mat-mini-fab (click)="deleteContact()">
        <mat-icon>delete</mat-icon>
      </button>
    </div>
  </div>
</div>
